<template>
  <div>
    <tcsc-header></tcsc-header>

    <div class="w-full max-w-screen-xl mx-auto px-6">
      <div class="lg:flex -mx-6">
        <div
          id="sidebar"
          class="hidden fixed inset-0 pt-16 h-full bg-white z-40 w-full border-b -mb-16 lg:-mb-0 lg:h-auto lg:border-b-0 lg:pt-0 lg:w-1/4 lg:block lg:border-0 xl:w-1/5"
        >
          <tcsc-menu />
        </div>
        <div
          id="content-wrapper"
          class="min-h-screen w-full lg:static lg:max-h-full lg:overflow-visible lg:w-3/4 xl:w-4/5 py-12 px-6"
        >
          <div id="content">
            <router-view />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TcscHeader from "@/components/Header.vue";
import TcscMenu from "@/components/Menu.vue";

export default {
  components: {
    TcscHeader,
    TcscMenu
  }
};
</script>

<style></style>
